<template>
	<view style="display: flex;flex-wrap: wrap;" :style="{
		'width': nodeModel.configDict.componentStyle.width+'rpx',
	    'background': nodeModel.configDict.componentStyle.background,
		'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
		'justify-content': nodeModel.configDict.componentStyle.justify_content,
		'align-items': nodeModel.configDict.componentStyle.align_items,
		'marginTop': nodeModel.configDict.componentStyle.marginTop+'rpx',
		'marginBottom': nodeModel.configDict.componentStyle.marginBottom+'rpx',
		'marginLeft': nodeModel.configDict.componentStyle.marginLeft+'rpx',
		'marginRight': nodeModel.configDict.componentStyle.marginRight+'rpx',
		'paddingTop': nodeModel.configDict.componentStyle.paddingTop+'rpx',
		'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom+'rpx',
		'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft+'rpx',
		'paddingRight': nodeModel.configDict.componentStyle.paddingRight+'rpx'
		}">
		<view style="background-color: #FFF;width: 100%;margin-bottom: 20rpx;border-bottom: #eee solid 1rpx;" v-if="nodeModel.configDict.itemStyle.isShowForTabs">
			<u-tabs :list="nodeModel.configDict.itemList" :current="nodeModel.configDict.itemStyle.defaultSel" keyName='text1' @click="tabsClick"
				:lineColor="nodeModel.configDict.itemStyle.activeColor"
				:inactiveStyle="{color: nodeModel.configDict.itemStyle.inactiveColor}"
				:activeStyle="{color: nodeModel.configDict.itemStyle.activeColor}"
				:scrollable='nodeModel.configDict.itemStyle.scrollable'></u-tabs>
		</view>
		<view v-for="(item, index) in itemList" :key="index" @click="itemHandle(item)"
			style="display: flex;border-bottom: 1px solid #eeeeee;" :style="{
			'width': nodeModel.configDict.itemStyle.width+'rpx',
			'background': nodeModel.configDict.itemStyle.background,
			'flex-direction': nodeModel.configDict.itemStyle.flex_direction,
			'justify-content': nodeModel.configDict.itemStyle.justify_content,
			'align-items': nodeModel.configDict.itemStyle.align_items,
			'marginBottom': nodeModel.configDict.itemStyle.marginBottomForItem+'rpx',
			'marginLeft': nodeModel.configDict.itemStyle.marginLeftForItem+'rpx',
			'paddingTop': nodeModel.configDict.itemStyle.paddingTopForItem+'rpx',
			'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForItem+'rpx',
			'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForItem+'rpx',
			'paddingRight': nodeModel.configDict.itemStyle.paddingRightForItem+'rpx',
		}">

			<view v-if="item.fileType=='video'">
				<video id="myVideo" :src="item.coverUrl" object-fit='cover' enable-danmu danmu-btn controls :style="{
					'width': nodeModel.configDict.itemStyle.widthForCover1+'rpx',
					'height': nodeModel.configDict.itemStyle.heightForCover1+'rpx'
				}"></video>
			</view>
			<view v-else>
				<u-image :width="nodeModel.configDict.itemStyle.widthForCover1+'rpx'"
					:height="nodeModel.configDict.itemStyle.heightForCover1+'rpx'"
					:radius="nodeModel.configDict.itemStyle.borderRadiusForCover1+'rpx'" :src="item.coverUrl"
					mode='aspectFill'></u-image>
			</view>
			<view v-if="nodeModel.configDict.itemStyle.isShowForText1"
				style="border: #007AFF00 1rpx solid;display: flex;flex-direction: column;justify-content: space-between;width: 100%;"
				:style="{
				'min-height': nodeModel.configDict.itemStyle.flex_direction=='row'||nodeModel.configDict.itemStyle.flex_direction=='row-reverse' ? nodeModel.configDict.itemStyle.heightForCover1 + 'rpx' : 0,
				'paddingTop': nodeModel.configDict.itemStyle.paddingTopForFlex2+'rpx',
				'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForFlex2+'rpx',
				'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForFlex2+'rpx',
				'paddingRight': nodeModel.configDict.itemStyle.paddingRightForFlex2+'rpx',
			}">
				<view class="">
					<view v-if="nodeModel.configDict.itemStyle.isShowForText1" class="limitLineNumOfTwo" :style="{
						'marginTop': nodeModel.configDict.itemStyle.marginTopForText1+'rpx',
						'color': nodeModel.configDict.itemStyle.colorForText1,
						'font-size': nodeModel.configDict.itemStyle.fontsizeForText1 + 'rpx',
						'font-weight': nodeModel.configDict.itemStyle.fontweightForText1,
						'-webkit-line-clamp': nodeModel.configDict.itemStyle.lineNumForText1,
					}">{{item.title}}</view>
					<view v-if="nodeModel.configDict.itemStyle.isShowForText2" class="limitLineNumOfTwo" :style="{
						'marginTop': nodeModel.configDict.itemStyle.marginTopForText2+'rpx',
						'color': nodeModel.configDict.itemStyle.colorForText2,
						'font-size': nodeModel.configDict.itemStyle.fontsizeForText2 + 'rpx',
						'font-weight': nodeModel.configDict.itemStyle.fontweightForText2,
						'-webkit-line-clamp': nodeModel.configDict.itemStyle.lineNumForText2,
					}">{{item.subTitle}}</view>
				</view>

				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view v-if="nodeModel.configDict.itemStyle.isShowForText3" :style="{
					'marginTop': nodeModel.configDict.itemStyle.marginTopForText3+'rpx',
					'color': nodeModel.configDict.itemStyle.colorForText3,
					'font-size': nodeModel.configDict.itemStyle.fontsizeForText3 + 'rpx',
					'font-weight': nodeModel.configDict.itemStyle.fontweightForText3,
				  }">
						{{ $time.dateFormat(nodeModel.configDict.itemStyle.formatForText3, item.createTime)}}
					</view>
					<view v-if="nodeModel.configDict.itemStyle.isShowForText4" :style="{
					'marginTop': nodeModel.configDict.itemStyle.marginTopForText4+'rpx',
					'color': nodeModel.configDict.itemStyle.colorForText4,
					'font-size': nodeModel.configDict.itemStyle.fontsizeForText4 + 'rpx',
					'font-weight': nodeModel.configDict.itemStyle.fontweightForText4,
				  }">
						{{ nodeModel.configDict.itemStyle.beforeForText4||'' }}
						{{item.readUserCount}}
						{{ nodeModel.configDict.itemStyle.afterForText4||'' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		count
	} from '@/common/utils/count.js'
	import {
		common
	} from '@/api/common.js'
	export default {
		props: {
			nodeModel: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				itemList: [],
				page: 1,
				size: 20,
				showEmpty: false,
				isLastPage: false,
				current: 0,
				currentItem: {}
			}
		},
		watch: {

		},
		mounted() {
			if(this.nodeModel.configDict.itemStyle.isShowForTabs){
				this.page = 1
				var item = this.nodeModel.configDict.itemList[this.nodeModel.configDict.itemStyle.defaultSel]
				if(!item) return
				this.currentTab = item.text1
				this.currentItem = item
				this.loadData()
			}else{
				this.loadData()
			}
		},
		methods: {

			reachBottom() {
				if(!this.nodeModel.configDict.itemStyle.isShowForTabs){
					var query = JSON.parse(this.nodeModel.configDict.componentStyle.query)
					if (query.dataType == '2') {
						if (this.isLastPage) {
							return
						}
						this.loadData()
					}
				}else{
					var query = JSON.parse(this.nodeModel.configDict.componentStyle.query)
					if (query.dataType == '2') {
						if (this.isLastPage) {
							return
						}
						this.loadData()
					}
				}
				
			},
			tabsClick(val) {
				this.page = 1
				var item = this.nodeModel.configDict.itemList[val.index]
				if (!item.query) return
				this.currentItem = item
				this.loadData()
			},
			itemHandle(e) {
				var query = {}
				if(this.nodeModel.configDict.itemStyle.isShowForTabs){
					var item = this.nodeModel.configDict.itemList[this.nodeModel.configDict.itemStyle.defaultSel]
					if (item.query) {
						query = JSON.parse(item.query)
					}
				}else{
					if (this.nodeModel.configDict.componentStyle.query) {
						query = JSON.parse(this.nodeModel.configDict.componentStyle.query)
					}
				}
				query.obj_id = e.id
				query = JSON.stringify(query)
				this.$emit('itemHandle', {query: query})
			},
			loadData() {
				if(this.nodeModel.configDict.itemStyle.isShowForTabs){
					var query = JSON.parse(this.currentItem.query)
					if (query.dataType == '1') {
						common.operateActionPost(query.url, query).then(res => {
							if (res.data.code == 10000) {
								this.itemList = res.data.data.list
							}
						});
					} else if (query.dataType == '2') {
						var params = {
							page: this.page,
							size: this.size,
						}
						params = Object.assign(params, query)
						common.operateActionGet(query.url, params).then(res => {
							if (res.data.code == 10000) {
								if (this.page == 1) {
									this.itemList = []
								}
								var list = res.data.data.list
								this.itemList = [...this.itemList, ...list]
								this.showEmpty = this.itemList.length < 1
								if (res.data.data.next) {
									this.page += 1
									this.isLastPage = false
								} else {
									this.isLastPage = true
								}
							}
						});
					}
				}else{
					var query = JSON.parse(this.nodeModel.configDict.componentStyle.query)
					if (query.dataType == '1') {
						common.operateActionPost(query.url, query).then(res => {
							if (res.data.code == 10000) {
								this.itemList = res.data.data.list
							}
						});
					} else if (query.dataType == '2') {
						var params = {
							page: this.page,
							size: this.size,
						}
						params = Object.assign(params, query)
						common.operateActionGet(query.url, params).then(res => {
							if (res.data.code == 10000) {
								if (this.page == 1) {
									this.itemList = []
								}
								var list = res.data.data.list
								this.itemList = [...this.itemList, ...list]
								this.showEmpty = this.itemList.length < 1
								if (res.data.data.next) {
									this.page += 1
									this.isLastPage = false
								} else {
									this.isLastPage = true
								}
							}
						});
					}
				}
			},
		}
	}
</script>

<style>
</style>
